﻿<template>
  <baseUI :isShow="myConfig.isShow" :label="myConfig.label" :showLabel="myConfig.showLabel"
  :labelSpan="myConfig.labelSpan" :isRequired="myConfig.isRequired" :showErrMsg="showErrMsg" :errMsg="errMsg"
  :commonConfig="commonConfig">
    <div :style="myConfig.myStyle">
      <span v-if="myConfig.isEnable">
        <span v-if="selectedValue" class="icon-text">
          <i @click="handleDownload">{{getFileName(selectedValue)}}</i> <i class="el-icon-delete" @click="handleRemove"></i>
        </span>
        <span v-else>
          <el-button type="success" v-if="myConfig.isEnable" round @click="handleEdit">上传<i class="el-icon-upload el-icon--right"></i></el-button>
        </span>
      </span>
      <span v-else>
        <span v-if="selectedValue" class="icon-text">
          <i @click="handleDownload">{{getFileName(selectedValue)}}</i>
        </span>
      </span>
    </div>
    <el-dialog v-drag
        :closeOnClickModal="false"
        :visible.sync="showPop"
        append-to-body
        width="50%"
        class="pop"
        :before-close="handleShowPopClose">
      <el-form>
        <el-form-item>
          <el-upload
          ref="upload"
          list-type="text"
          :disabled="!myConfig.isEnable"
          :action="uploadUrl"
          :auto-upload="true"
          accept="*"
          drag
          name="file"
          :limit="1"
          :file-list="fileList"
          :show-file-list="false"
          :on-success="handleSuccess">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
  </baseUI>
</template>
<script>
import baseComponent from '../baseComponent.vue'
import baseUI from '../baseUI.vue'
export default {
  components: {
    baseComponent, baseUI
  },
  extends: baseComponent,
  mounted () {
  },
  data () {
    return {
      uploadUrl: $URL.IMG_UPLOAD_URL + '/fileset/upload_stream',
      showPop: false,
      fileList: []
    }
  },
  methods: {
    isDataComponent () {
      return true
    },
    handleRemove () {
      if (!this.selectedValue) return true
      let url = this.getFileUrl(this.selectedValue)
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonClass: 'el-button--info',
        cancelButtonText: '取消'
      }).then(() => {
        return this.$api.recycle2FileService(url).then(data => {
          this.selectedValue = ''
        })
      }).catch(() => {
        return false
      })
    },
    handleDownload () {
      if (this.selectedValue) {
        this.$api.downloadFromFileService(this.selectedValue)
      }
    },
    handleSuccess (response, file, fileList) {
      let rep = response
      if (rep.error) {
        this.$message.error('上传失败:' + rep.error)
        return false
      }
      if (rep.result.code !== 'success') {
        this.$message.error('上传失败:' + rep.result.msg)
        return false
      }
      this.selectedValue = response.result.file_down_url + '/name/' + file.name
      this.showPop = false
    },
    handleChange (file, fileList) {
      if (file.status === 'ready') {
        this.hasFileReady = true
      }
    },
    handleShowPopClose () {
      this.showPop = false
    },
    handleEdit () {
      this.fileList = []
      this.showPop = true
    },
    getFileName (url) {
      if (!url) return ''
      let arr = url.split('/name/')
      return arr.length > 1 ? arr[1] : '未知文件'
    },
    getFileUrl (url) {
      if (!url) return ''
      let arr = url.split('/name/')
      return arr[0]
    }
  },
  watch: {
  },
  computed: {
  }
}
</script>
<style lang="scss">
 .icon-show {
  font-size: 30px;
  cursor: pointer;
}
.icon-text {
  font-size: 14px;
  cursor: pointer;
}

</style>
